import { useContext } from 'react';

import ConvertPNG from '@/assets/images/auth/Convert.png';
import { ModalContext } from '@/shared/context/ModalContext';
import { useMetaTag } from '@/shared/lib/hooks';
import { FlexWrapper, Modal } from '@/shared/ui';
import Image from 'next/image';

import cs from './SuccessPassword.module.scss';

export const SuccessPassword = () => {
  const { closeModal } = useContext(ModalContext);
  useMetaTag(true, '#999999');

  return (
    <Modal className={cs.modal} isMobile={false} isOpen onCloseClick={closeModal} zIndex={1000}>
      <div className={cs.chooseConvert}>
        <FlexWrapper isCenter>
          <Image alt="Convert" className={cs.convert} height={164} src={ConvertPNG} width={164} />
        </FlexWrapper>
        <FlexWrapper>
          <h4 className={cs.titleSent}>Пароль отправлен</h4>
        </FlexWrapper>
        <div className={cs.sent}>
          Проверьте Входящие или&nbsp;Спам.
          <div>Eсли письмо не пришло, напишите нам.</div>
        </div>
      </div>
    </Modal>
  );
};
